﻿@using Domain.Entity
@model Pro260Website.Models.SliderListingModel

@{
    Layout = null;
    string leftPad = "635px";
    if (Model.Items.StartingItem > 1)
    {
        leftPad = "-205px";
    }

    var pagerAjax = new AjaxOptions
    {
        UpdateTargetId = "updateItem",
        HttpMethod = "Get",
        OnSuccess = "load"
    };
}

<head>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            load();
        });

        function load() {

            jQuery('#flip').jcoverflip({
                current: @(Model.Items.StartingItem + 0),
                change: function(event, ui) {
                    jQuery('#slider').slider('value', ui.to);
                    jQuery('#flip').jcoverflip('current', ui.to);
                }
            });

            jQuery('#slider').slider({
                step: 1,
                min: 0,
                max: 11,
                value: @(Model.Items.StartingItem - 2),
                
                slide: function(event, ui) {
                    if (event.originalEvent) {
                        var newVal = Math.round(ui.value);
                        jQuery('#flip').jcoverflip('current', newVal);
                        jQuery('#slider').slider('value', newVal);
                    }
                }
            });
        }        
    </script>
</head>
<div style="top:55px">
    <ul id="flip">
    
            @if(Model.Items.TotalPageCount > 1)
            {
                pagerAjax.Url = Url.Action("List", "Game", new { searchFor = Model.QueryInfo.QueryString, page = Model.Items.PreviousPageNumber, startingNum = 2, view = "GetSliderImages" }, null);
                
                <li style="left: @leftPad;">
                     @Ajax.ImageActionLink(" ", " ", "Previous Page", "List", "Game", new {searchFor = Model.QueryInfo.QueryString, page = Model.Items.PreviousPageNumber, startingNum = 2}, pagerAjax, "image","itemDisplayImage", 
                   "background-image: url(\"/../../GamersParadise/Images/PreviousImage.png\"), none ! important;")
                </li>
            }
            @foreach(Game game in Model.Items.Games)
            {
                Model.Items.GameAjaxOptions.Url = Url.Action("Game", "Game", new {id = game.Id});
                <li style="left: @leftPad;">
                
                @if(game.Pictures.Count > 0)
                {
                                        @Ajax.ImageActionLink(" ", " ", @game.Name, "Game", "Game", new { id = game.Id, viewname = "Game" }, Model.Items.GameAjaxOptions, "image","itemDisplayImage", 
                   "background-image: url(\"" + @Url.Action("GetDisplayImage", "Game", new { id = game.Id, index=0 }) + "\"), none ! important;")
                }
                else
                {
                   @Ajax.ImageActionLink(" ", " ", @game.Name, "Game", "Game", new { id = game.Id, viewname = "Game" }, Model.Items.GameAjaxOptions, "image", "itemDisplayImage",
                   "background-image: url(\"/../../GamersParadise/Images/NoImage.png\"), none ! important;")
                }

                </li>   
            }
                @if (Model.Items.TotalPageCount > 1)
                {
                    pagerAjax.Url = Url.Action("List", "Game", new { searchFor = Model.QueryInfo.QueryString, page = Model.Items.NextPageNumber, view = "GetSliderImages" }, null);
                    <li style="left: @leftPad;">
                            @Ajax.ImageActionLink(" ", " ", "Next Page", "List", "Game", new { searchFor = Model.QueryInfo.QueryString, page = Model.Items.NextPageNumber }, pagerAjax, "image", "itemDisplayImage",
                            "background-image: url(\"/../../GamersParadise/Images/NextImage.png\"), none ! important;")
                    </li>
                }
        </ul>
        <div>
            <div id="slider" style="top:15px"></div>
        </div>
</div>